<template>
    <div class="allbuju all">
        <div id="top"> 
            <p>联系客服</p>
        </div>
        <div style="text-align: center">
            <div class="yuan"><i class="fa-solid fa-phone"></i></div>
            <p>欢迎咨询客服电话028-923-520</p>
            <p style="color:rgb(138, 134, 134)">(工作时间:每天8:00-21:00)</p>
            <div class="center">
                <i class="fa-brands fa-qq"></i>
                <span>官方QQ群</span><br>
                <span>1234567</span>
            </div>
            <hr>
            <div class="center">
                <i class="fa-brands fa-weixin"></i>
                <span>微信公众号</span><br>
                <span>保洁保姆</span>
            </div>
            <hr>
            <div class="center">
                <i class="fa-solid fa-envelope"></i>
                <span>官方邮箱号</span><br>
                <span>1789942417@qq.com</span>
            </div>
            
        </div>
        <div id="flex">
            <div class="xiabiao" @click="icons('1')" >
               
                <i class="fa-solid fa-house-user"></i>
                <span>首页</span>
            </div>
            <div class="xiabiao" @click="icons('2')">
               <i class="fa-solid fa-list"></i>
                <span>订单</span>
            </div>
            <div class="xiabiao click" @click="icons('3')">
                <i class="fa-regular fa-circle-user"></i>
                <span>客服</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'wo',
  data(){
      return{

      }
  },
   methods:{
      icons(id){
           if(id==='1'){
                this.$router.replace('/baomubaojie')

           }else if(id=='2'){
               this.$router.replace('/dingdan')
           }else{
               this.$router.replace('/wo')
           }
       }
   }
}
</script>
<style scoped>
#top{
    display: flex;
    background-color: coral;
   justify-content: center;
}
#top i{
    margin: 10px 0 0 10px;
    font-size: 2rem;
    color: rgb(255, 255, 255);
}
#top p{

    font-weight: lighter;
    color: aliceblue;

}
hr{
    width: 50%;
    margin: auto;
}
.yuan{
    width: 70px;
    height: 70px;
    background-color: coral;
    margin:30px auto;
    border-radius: 50%;
 
}
.yuan i{
    position: relative;
    top: 20px;
    font-size: 2rem;
    color: white;
}
.center{

    text-align: center;
    line-height: 2;
    font-size: 1.2rem;
}
.center i{
    position: relative;
    color: coral;
    right: 20px;
    top: 10px;
    font-size: 2rem;
}
.all{
   
    background-color: rgb(252, 246, 225);
}
#flex{
    bottom: 0;
    height: 80px;
    width: 390px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    text-align: center;
    font-size: 20px;
    position: fixed;

}
.xiabiao{
  background-color: rgb(242, 239, 239);
  padding: 10px;
}
.xiabiao i{
     font-size: 30px;
     display: block;
}
.icon{
        color: rgb(255, 92, 33);
}
.xiabiao span{
    color: rgb(138, 134, 134);
   font-family: 'Courier New', Courier, monospace;
}
.click{
    color: rgb(255, 92, 33);
    
}
.click span{
    color: rgb(255, 92, 33);
    
}
</style>